<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item
      :title="items.title"
      :name="index + 1"
      v-for="(items, index) in datas"
      :key="index"
    >
      <div
        class="componList"
        draggable="true"
        @dragstart="drag($event)"
        @dragend="dragends($event)"
        :data-name="item.name"
        v-for="(item, ind) in items.comList"
        :key="ind"
      >
        <i class="iconfont" :class="item.icon" v-if="item.icon" />
        <van-icon :name="item.vanIcon" v-else />
        <p>{{ item.text }}</p>
      </div>
    </el-collapse-item>
  </el-collapse>
</template>
<script>
export default {
  name: "NewModule",
  props: {
    pointer: Object,
    activeNames: Array
  },
  data() {
    return {
      datas: [
        {
          title: "常用组件",
          comList: [
            // { 
            //   text: '商品搜索',
            //   type: '1-1',
            //   icon: 'icon-wenbensousuo',
            //   name: 'commoditysearch',
            // },
            {
              text: "标题文本",
              type: "1-3",
              icon: "icon-biaotiwenben",
              name: "captiontext",
            },
            {
              text: "图片广告",
              type: "1-3",
              icon: "icon-tupian",
              name: "pictureads",
            }
          ],
        },
        {
          title: "基础组件",
          comList: [
            {
              text: "魔方导航",
              type: "1-6",
              icon: "icon-mofangdaohang",
              name: "magiccube",
            },
            {
              text: "图文导航",
              type: "1-4",
              icon: "icon-tuwendaohang",
              name: "graphicnavigation",
            }
          ],
        },
        {
          title: "排版组件",
          comList: [
            {
              text: "横向标签",
              type: "2-2",
              icon: "icon-biaoqian",
              name: "storenotecard",
            },
          ],
        },
        {
          title: "互动组件",
          comList: [
            {
              text: "文章列表",
              type: "2-2",
              icon: "icon-wenzhangliebiao",
              name: "storenotecard",
            }
          ],
        }
      ],
    };
  },
  methods: {
    /**
     * 当用户开始拖动元素或选择文本时触发此事件
     *
     * @param {Object} event event对象
     */
    drag(event) {
      /* 开启穿透 */
      this.pointer.show = true;
      /* 传递参数 */
      event.dataTransfer.setData("componentName", event.target.dataset.name);
    },

    /**
     * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
     *
     * @param {Object} event event对象
     */
    dragends() {
      /* 关闭穿透 */
      this.pointer.show = false;
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep.el-collapse-item__header,
::v-deep.el-collapse-item__wrap {
  border-bottom: 0 !important;
}

/* 组件列表 */
.componList {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 80px;
  height: 88px;
  margin-bottom: 8px;
  align-items: center;
  cursor: all-scroll;
  transition: all 0.3s;
  &:hover {
    background: #155bd4;
    border-radius: 2px;
    font-weight: 700;
    i,
    p,
    span {
      color: #fff;
    }
  }
  /* 图标 */
  i {
    font-size: 32px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    color: #b0a8a8;
    margin-top: 4px;
  }
  /* 标题 */
  p {
    font-size: 12px;
    color: #323233;
    margin-top: 4px;
  }
  /* 数量 */
  span {
    color: #7d7e80;
    margin-top: 4px;
    font-size: 10px;
  }
}
</style>